import { ProFormDigit, ProFormText } from '@ant-design/pro-form';
import { Button, Form } from 'antd';
import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';

export const INGRESS_STACK_MAPPING = [
  {
    name: 'ingress_name',
    label: '服务名称',
    rules: [{ required: true, message: '请填写服务名称' }],
    Component: ProFormText,
    props: {},
  },
  {
    name: 'ingress_port',
    label: '映射端口',
    rules: [{ required: true, message: '请填写映射端口' }],
    Component: ProFormDigit,
    props: { min: 1024, max: 65535 },
  },
];

export const ENV_STACK_MAPPING = [
  {
    name: 'env_name',
    label: '名称',
    rules: [{ required: true, message: '请填写环境变量名称' }],
    Component: ProFormText,
    props: {},
  },
  {
    name: 'env_value',
    label: '变量',
    rules: [{ required: true, message: '请填写变量' }],
    Component: ProFormText,
    props: {},
  },
];

export const PORT_STACK_MAPPING = [
  {
    name: 'port_source',
    label: '宿主机端口',
    rules: [{ required: true, message: '请填写宿主机端口' }],
    Component: ProFormDigit,
    props: { min: 1024, max: 65535 },
  },
  {
    name: 'port_target',
    label: '容器端口',
    rules: [{ required: true, message: '请填写容器端口' }],
    Component: ProFormDigit,
    props: { min: 1024, max: 65535 },
  },
];

export const VOLUME_STACK_MAPPING = [
  {
    name: 'volume_source',
    label: '目录名称',
    rules: [{ required: true, message: '请填写目录名称' }],
    Component: ProFormText,
    props: {},
  },
  {
    name: 'volume_target',
    label: '挂载路径',
    rules: [{ required: true, message: '请填写挂载路径' }],
    Component: ProFormText,
    props: {},
  },
];

const MAPPINGS = [
  {
    name: 'ingress',
    actionName: '服务映射',
    config: INGRESS_STACK_MAPPING,
  },
  {
    name: 'ports',
    actionName: '端口映射',
    config: PORT_STACK_MAPPING,
  },
  {
    name: 'volumes',
    actionName: '挂载卷',
    config: VOLUME_STACK_MAPPING,
  },
  {
    name: 'envs',
    actionName: '环境变量',
    config: ENV_STACK_MAPPING,
  },
];

export default () => {
  return (
    <>
      <ProFormText name="name" label="名称" rules={[{ required: true, message: '请填写名称' }]} />
      <ProFormText
        name="image"
        label="镜像名称"
        rules={[{ required: true, message: '请填写镜像名称' }]}
      />
      <ProFormText name="command" label="启动命令" />
      <ProFormText name="args" label="启动参数" />
      {MAPPINGS.map((item) => (
        <Form.List key={item.name} name={item.name}>
          {(fields, { add, remove }) => (
            <>
              {fields.map(({ key, name }) => (
                <div key={key} style={{ display: 'flex' }}>
                  {item.config.map((c) => (
                    <div key={c.name} style={{ flex: 1, marginRight: 8 }}>
                      <c.Component
                        name={[name, c.name]}
                        label={c.label}
                        rules={c.rules}
                        {...c.props}
                      />
                    </div>
                  ))}
                  <MinusCircleOutlined
                    style={{ fontSize: 20, paddingTop: 35 }}
                    onClick={() => remove(name)}
                  />
                </div>
              ))}
              <Form.Item>
                <Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>
                  添加{item.actionName}
                </Button>
              </Form.Item>
            </>
          )}
        </Form.List>
      ))}
    </>
  );
};
